<template>
	<view>
		<view class="quesList" :class="[isZycpFlag ? 'zycpBg' : '']">
			<view class="quesTit" v-if="!isZycpFlag">
				<block v-if="item.htmlFlag">
					<rich-text :nodes="item.title"></rich-text>
					<!-- <jyf-parser :html="item.title" :tag-style="tagStyle" :selectable="true"></jyf-parser> -->
				</block>
				<block v-else>
					{{item.title}}
				</block>
			</view>
			<template v-if="isZycpFlag">
				<template v-if="currAnswerNum == 1">
					<view class="quesTit">{{item.queTitle}}</view>
				</template>
				<template v-else>
					<view class="queTitWrap">
						<view class="tit">{{item.queTitle}}.</view>
						<view class="queTitCon">
							<view class="titItem">{{item.queA}}</view>
							<view class="titItem">{{item.queB}}</view>
						</view>
					</view>
				</template>
			</template>
			
			<view class="quesOptions" :class="[currAnswerNum == 2 ? 'spec' : '']">
				<!-- :disabled="item.optIndex == innerIndex ? true : false" -->
				<view class="queLayer posAbso" v-if="showQueLayerFlag"></view>
				<button class="optionsItem"
					:class="[item.optIndex == innerIndex ? 'active' : '']"
					:disabled="item.optIndex == innerIndex ? true : false"
					v-for="(innerItem,innerIndex) in item.optionList"
					:key="innerIndex"
					@tap="selectOptions(index,innerIndex)"
				>
					<!-- <view class="optionsWords" :class="[item.optIndex == innerIndex ? 'selBg' : '']">{{innerItem.optionId}}</view> -->
					<!-- ={{innerItem.optionId}}={{innerItem.value}}=={{item.clickNum}} -->
					<view class="optionsCon">{{innerItem.label}}</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	// import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		// components:{
		// 	jyfParser
		// },
		props:{
			showQueLayerFlag:{
				type:Boolean,
				default:false
			},
			currAnswerNum:{
				type:Number,
				default:1
			},
			isZycpFlag:{
				type:Boolean,
				default:false
			},
			isLastFlag:{
				type:Boolean,
				default:false
			},
			item:{
				type:Object
			},
			index:Number,
			currIndex:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				// tagStyle: {
				// 	p: 'font-size:18px'+
				// 		'px;font-weight:400;margin-bottom:25px;text-align:justify;word-break:normal;word-wrap:break-word;/* background-color:transparent!important; */color:#333333',
				// 	section: 'font-size:18px'+
				// 		'px;font-weight:400;',
				// 	img: 'max-width:100%!important;height:auto!important;margin:8px auto!important;display:block!important'
				// }
			}
		},
		methods:{
			selectOptions(currNum,index){
				this.$emit('changeOptIndex',currNum,index)
			},
			selectOptions_zy(currNum,index,answer,scoreA,scoreB,queId){
				this.$emit('changeOptIndex_zy',currNum,index,answer,scoreA,scoreB,queId)
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import '@/static/scss/sqCpQue.scss'; 
</style>